<template>
  <div class="pagination">
     <button v-show="offset >1"  @click='substr' >上一页</button>
     <button v-show="satrtandend.start >1" @click="numarrive(1)" :class="{active:offset==1}">1</button>
    <button v-show="satrtandend.start-1>1">...</button>
    
    <button v-for="(m,index) in satrtandend.end"  :key="index" v-show="m>satrtandend.start-1" @click="numarrive(m)" :class="{active:offset==m}">{{m}}</button>
    <button v-show="satrtandend.end<totalpagenum-1">···</button>
   
    <button v-show="offset<totalpagenum" @click="add">下一页</button>
    
    <button style="margin-left: 30px">共 {{totalpagenum}} 页</button>
    
  </div>
</template>

<script>
  export default {  
    name: "frpage",
    props:['offset','total','continues','numbers'],
     computed:{
       totalpagenum(){
         return Math.ceil(this.total/this.numbers)
       },
       satrtandend(){
         let start = 0;
         let end =0;
         if(this.totalpagenum<5){
           start=1;
           end = 5
         }else{
             start =this.offset-parseInt(this.continues/2)
             end  = this.offset+parseInt(this.continues/2)
             if(start<1){
               start=1
               end=5
             }
             if(end>this.totalpagenum){
               end=this.totalpagenum
             }
         }
            return {start,end}
       }
  },
     methods:{
       substr(){
        //console.log(222);
        
        
           this.$emit('substr')
       },
       add(){
         
           this.$emit('add')
       },
       numarrive(pagenums){
            this.$emit('numarrive',pagenums)
       }
     }
  }
 
</script>

<style lang="less" scoped>
  .pagination {
      text-align: center;
    button {
      margin: 0 5px;
      background-color: #f4f4f5;
      color: #606266;
      outline: none;
      border-radius: 2px;
      padding: 0 4px;
      vertical-align: top;
      display: inline-block;
      font-size: 13px;
      min-width: 35.5px;
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;
      border: 0;

      &[disabled] {
        color: #c0c4cc;
        cursor: not-allowed;
      }

      &.active {
        cursor: not-allowed;
        background-color: #409eff;
        color: #fff;
      }
    }
  }
</style>